<template>
	<view class="content">
		<my-home  class="home-float"  v-if="floatData.open == 1"   :floatData="floatData" :floatX="floatX" :floatY="floatY" :floatFrom="18"></my-home>
		<!--顶部布局-->
		<view class="top">
			<view class="avatar-nickname">
				<view class="avatar-wrap">
					<!-- #ifdef MP-ALIPAY -->
					<image class="avatar" mode="widthFix" :src="mainData.avatarUrl"></image>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="avatars-new">
						<button class="avatars" type="" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
							plain="true">
							<image :src="avatar" class="avatar" mode="widthFix">
							</image>		
						</button>
						<image class="vip-avatar" v-if="mainData.vip==2" mode="widthFix"
							src="../../static/images/vip.png"></image>
					</view>
						
					<button class="avatars-1" type="" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"			
						plain="true">
						更改头像
					</button>
					<!-- #endif -->
				</view>
				<view class="nickname">
					<view class="nickname-view">
						<!-- #ifdef MP-ALIPAY -->
						<text>{{mainData.nickName}}</text>
						<!-- #endif -->
						<!-- #ifdef MP-WEIXIN -->
						<!-- 昵称获取 -->
						<input type="nickname" class="nickname-deit" style="font-size: 28rpx;color: #fff;flex: 1;"
							placeholder="请输入昵称" v-model="nickname" @blur="getNickname" />
						<!-- #endif -->
						
						
						<!-- <image class="nickname-vip" v-if="mainData.vip==2" mode="widthFix"
							src="https://api.cd1a.cn/imges/vip.png"></image> -->
					</view>
					<view class="nickname-bottom">
						<view v-if="mainData.vip_describe">{{mainData.vip_describe}}</view>
						<view v-if="mainData.sat_free">{{mainData.sat_free}}</view>
					</view>

					<!-- #ifdef MP-ALIPAY -->
					<view>
						<button class="bind-phone" size="mini" type="primary" v-if="isBindPhone"
							open-type="getPhoneNumber" @getphonenumber="handlePhone">绑定手机号</button>
					</view>
					<!-- #endif -->
				</view>
			</view>
			<view class="sign-in" v-if="mainData.open_sign && mainData.open_sign!='1' && mainData.open_sign!='5'">
				<uv-btn shape="circle" @click="handleJumpSign" :custom-style="customStyle" background="#FFAE14"
					size="mini" text="签到送礼"></uv-btn>
			</view>
			<view class="amount-wrap">
				<view class="amount">
					<view class="amount-top">
						<view>
							<view>{{mainData.text_return.tiantian}}</view>
							<view>{{mainData.money/100}}</view>
						</view>
						<view>
							<view>{{mainData.text_return.donate}}</view>
							<view>{{mainData.currency/100}}</view>
						</view>
						<view>
							<view>{{mainData.text_return.integral}}</view>
							<view>{{mainData.integration}}</view>
						</view>
					</view>
					<view class="amount-bottom">{{mainData.text_return.info}}</view>
				</view>
			</view>
		</view>

		<!--menu-->
		<view class="menu">
			<view v-for="(item,i) in menuList" :key="i" class="menu-item" @click="handleMenuClick(i)">
				<view>
					<image class="menu-img" mode="widthFix" :src="item.image"></image>
				</view>
				<view class="menu-title">{{item.text}}</view>
			</view>
		</view>
		<!--中部banner-->
		<view class="banner" v-if="bannerList.length > 0">
			<u-swiper bg-color="#fff" @click="handleBannerClick" :list="bannerList" border-radius="0"
				indicator-pos="bottomLeft" height="160"></u-swiper>
		</view>
		<!-- 底部card -->
		<view class="card" v-if="bottom[0]">
			<view class="card-left">
				<image :src="bottom[0].img" class="card-img1" mode="" @click="handleActivityClick(2)">
				</image>	
			</view>
			<view class="card-right">
				<image :src="bottom[1].img" class="card-img2" mode="" @click="handleActivityClick(1)">
				</image>	
				<image :src="bottom[2].img" class="card-img2" mode="" @click="handleActivityClick(0)">
				</image>	
			</view>
		</view>
		<!--底部activity-->
		<view class="activity"  v-else :style="{'padding-top' : bannerList.length > 0 ? '40rpx' : '0rpx' }" >
			<view v-for="(item,i) in activityList" :key="i" class="menu-item" @click="handleActivityClick(i)">
				<view class="activity-title">{{item.title}}</view>
				<view class="activity-img">
					<image mode="widthFix" :src="item.imgUrl"></image>
				</view>
			</view>
		</view>
		
		<!--safe-area-->
		<view class="bottom-safe-area"></view>

		<customer-service></customer-service>

		<common-popup :show="signShow" :img="icon" @close="handleCloseClick">
			<view class="sign-btn">
				<button class="sign-btn-contact" send-message-title="下载天天充电APP" show-message-card
					send-message-path="/pages/index/index" open-type='contact'>确 认</button>
			</view>
		</common-popup>

		<common-drag />

		<view class="setting" @click="handleSettingClick" v-if="setting">
			<image class="setting-image" mode="widthFix" src="../../static/images/setting.png"></image>
		</view>
		<view class="redemption-setting"  v-if="redemptionUrl"  @click="handleRedemptionClick"  :style="{right:setting == true ? '126rpx' : '36rpx'}">
			<image class="redemption-image" mode="" :src="redemptionUrl"></image>
		</view>
	</view>
</template>
<script>
	import {
		UPLOAD_URL
	} from '@/env.js';
	export default {
		data() {
			return {

				icon: this.$imgUrl + 'sign/sign-01.png',
				iconClose: this.$imgUrl + 'index/close.png',
				iconth:this.$imgUrl + 'personal-center/tehui.png',
				iconsq:this.$imgUrl + 'personal-center/shengqian.png',
				icongm:this.$imgUrl + 'personal-center/chonzhi.png',
				iconhelp:this.$imgUrl + 'personal-center/help.png',
				//其它数据
				mainData: {

					money: 0,
					currency: 0,
					integration: 0,
					text_return: {
						donate: "",
						info: "",
						integral: "",
						tiantian: "",
					}
				},
				//签到
				signShow: false,
				signCustomStyle: {
					lineHeight: '80rpx',
					height: '80rpx',
					paddingLeft: '120rpx',
					paddingRight: '120rpx',
				},
				//样式
				customStyle: {
					lineHeight: '60rpx',
					height: '60rpx',
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
				},

				menuList: [],
				currentMenu: {}, //当前菜单点击时的数据。

				bannerList: [],
				currentBanner: {},

				activityList: [],

				isBindPhone: false, //有没有绑定手机号，没有绑定要显示绑定手机号按钮。只在支付宝端使用。
				code: null, //手机号授权需要的code
				//设置按钮
				setting: false,
				avatar: '', // 默认头像
				nickname: '', // 用户昵称
				floatData:{} ,
				floatX:300,
				floatY:150,
				clientHeight:null,
				open_sign_url:'',//签到跳转链接
				bottom:'',
				fuyou_sign:'',
				redemptionUrl:'', // 兑换中心图片地址
			}
		},
		onInit(){
			
		},
		onReady() {
			
		},
		onLoad() {
			this._getCode();
			this.getClineHeight();
		},
		onShow() {
			
			this.getData();
		},
		onHide() {
			//隐藏时关闭弹窗
			this.signShow = false;
			//停止播放语音
			//this.$utils.stopAudio();
		},
		onUnload() {
			/* uni.navigateBackMiniProgram({
				success:function(){
				}
			}) */
			//停止播放语音
			//this.$utils.stopAudio();
		},
		methods: {
			getBarHeight(){
			        const res = uni.getSystemInfoSync()
			        if(res.platform==='ios'){
			            return 44+res.statusBarHeight
			        }else if(res.platform==='android'){
			            return 48+res.statusBarHeight
			        }else{
			            return 0;
			        }
			    },
			    //获取可视区域高度
			    getClineHeight(){
			        const res = uni.getSystemInfo({
			            success:(res=>{
			                this.clientHeight = res.windowHeight-uni.upx2px(80)-this.getBarHeight();
							this.floatY =  this.clientHeight - 50;
			            })
			        });
			    },
			// 获取头像
			onChooseAvatar(e) {
					const {
						avatarUrl
					} = e.detail // 此返回的路径为临时路径，需转换为永久路径保存使用
					this.avatar = avatarUrl
					uni.uploadFile({
						url: UPLOAD_URL,
						filePath: avatarUrl,
						fileType: 'image',
						name: 'file',
						formData: {
							"modular_name": 'repair'
						},
						success: (res) => {
							const data = JSON.parse(res.data);
							this.$u.api.getUser_info({
								userid_locked: uni.getStorageSync('userId'),
								uid: uni.getStorageSync('uid'),
								platform: 'applet',
								version: '4.0.0',
								nickName: '',
								avatarUrl: data.data.file_url,
							}).then(res => {
								this.$utils.toast('更改头像成功!');
							});
						},
						fail: () => {
							uni.hideLoading();
							this.$utils.toast('上传失败，请重试！');
							this.$refs.uUpload2.remove(len - 1);
						}
					});					
			},
			// 获取昵称
			getNickname(e) {
				this.nickname = e.detail.value
				if (!e.detail.value) {
					this.$utils.toast('修改昵称不能为空!');
					this.nickname = this.mainData.nickName;
				} else {
					this.$u.api.getUser_info({
						userid_locked: uni.getStorageSync('userId'),
						uid: uni.getStorageSync('uid'),
						platform: 'applet',
						version: '4.0.0',
						nickName: e.detail.value,
						avatarUrl: '',
					}).then(res => {

					});
				}

			},
			//menu
			handleMenuClick(index) {
				this.currentMenu = {
					originalData: this.menuList[index].originalData,
					from: '12',
				};
				this.$u.debounce(() => {
					this._menuDebounce(index)
				}, this.$debounceTime, true);
			},
			_menuDebounce(index) {
				this.$utils.oldCommonJump(this.currentMenu);
			},
			//banner
			handleBannerClick(index) {
				this.currentBanner = {
					originalData: this.bannerList[index].originalData,
					from: '8',
				};
			    this.$u.debounce(this._bannerDebounce, this.$debounceTime, true);
			},
			_bannerDebounce() {
				this.$utils.oldCommonJump(this.currentBanner);
			},
			//activity
			handleActivityClick(index) {
				this.$u.debounce(() => {
					this._activityDebounce(index)
				}, this.$debounceTime, true);
			},
			_activityDebounce(index) {

				if (index == 0) {
					//跳到特惠套餐页面
					uni.navigateTo({
						url: '/pages/member/combo?from=3'
					});
				} else if (index == 1) {
					//跳到充值中心页面
					uni.navigateTo({
						url: '/pages/pay/recharge?from=4'
					});
				}else if(index == 2){
					this.$utils.jumpWebview(this.bottom[0].url); 
				}

			},
			//sign
			handleJumpSign() {

				switch (this.mainData.open_sign) {

					case "2":
						//跳转签到页
						uni.navigateTo({
							url: this.open_sign_url
						})
						// 老版签到页面
						/*  uni.navigateTo({
						  	 url:"/pages/sign/index"
						  }); */
						break;
					case "3":
						//显示弹窗，点击进入小程序客服回话
						this.signShow = true;
						break;
					case "4":
						//提示
						this.$utils.modal({
							content: this.mainData.open_sign_msg,
							showCancel: false,
						});
						break;
				};
			},
			handleCloseClick() {
				this.signShow = false;
			},
			//main data
			getData() {
				this.$u.api.getPersonalCenter({
					uid: uni.getStorageSync('uid'),
				}).then(res => {
					this.floatData = res.data.window;
					//其它数据
					
					this.mainData = res.data;		
					this.avatar = res.data.avatarUrl;
					this.nickname = res.data.nickName;
					this.fuyou_sign = res.data.fuyou_sign;
					this.bottom = res.data.bottom;
					this.open_sign_url = res.data.open_sign_url;
					this.redemptionUrl = res.data.redemptionUrl;
					//菜单
					let menuArr = res.data.button || [];
					let l = menuArr.length;
					let menuList = [];
					for (let i = 0; i < l; i++) {
						let json = {
							//当前页面用的。
							image: menuArr[i].img,
							text: menuArr[i].name,
							//接口的原始数据，统一在utils.js里处理
							originalData: menuArr[i],
						};
						menuList.push(json);
					};
					this.menuList = menuList;
					//中部banner数据
					let arr = res.data.active;
					let len = arr.length;
					let bannerList = [];
					for (let i = 0; i < len; i++) {
						let json = {

							image: arr[i].img,

							originalData: arr[i],
						};
						bannerList.push(json);
					};
					this.bannerList = bannerList;
					
					this.activityList = [{
						title: '特惠套餐',
						imgUrl: res.data.ad_card_img,

					}, {
						title: '充值中心',
						imgUrl: res.data.ad_pay_img,

					}];
					//手机号授权
					this.isBindPhone = res.data.phone ? false : true;
					//设置按钮
					this.setting = res.data.setup == '1';
					//播放语音
					if (res.data.voice.open == '1') {
						this.$utils.playAudio(res.data.voice.voice);
					};

				}).catch();

			},
			//setting
			handleSettingClick() {
				uni.navigateTo({
					url: '/pages/miscellaneous/setting'
				});
			},
			handleRedemptionClick() {
				uni.navigateTo({
					url: '/pages/integral/redemption'
				});
			},
			_getCode() {

				// #ifdef	MP-ALIPAY
				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(res) {
						_this.code = res.code
					}
				});
				// #endif
			},
			handlePhone(e) {
				// 从存储中获取用户ID，如果不存在则返回空字符串
				let uid = uni.getStorageSync('uid') || '';
				// 如果事件对象的错误信息（e.detail.errMsg）是 "getPhoneNumber:ok"
				if (e.detail.errMsg == "getPhoneNumber:ok") {

					let params = {
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						code: this.code
					};

					this.$u.api.phoneAuthorization({
						remind: '1',
						...params,
						uid,
					}).then(res => {

						if (res.result_code == "361") {
							//成功了，完结
							this.$utils.toastCallback(res.msg, () => {
								uni.setStorageSync('userPhone', res.phone);

								if (res.userid_locked) {
									uni.setStorageSync('userId', res.userid_locked);
								};

								this.getData();
							})
						} else if (res.result_code == "2") {
							//弹窗提示用户需要合并微信支付宝账户了
							this.$utils.modal({
								title: '温馨提示',
								content: res.msg,
								callback: (bool) => {
									if (bool) {

										this.$u.api.phoneAuthorization({
											remind: '2',
											...params,
											uid,
										}).then(ret => {
											if (ret.result_code == "361") {
												//成功了
												this.$utils.toastCallback(ret.msg, () => {
													uni.setStorageSync('userPhone', ret
														.phone);
													if (ret.userid_locked) {
														uni.setStorageSync('userId',
															ret.userid_locked);
													};
													this.getData();
												})
											} else {
												//失败
												this.$utils.modal({
													title: '温馨提示',
													content: ret.msg,
													showCancel: false
												});
											};
										});
									};
								}
							});
						} else {
							//失败
							this.$utils.modal({
								title: '温馨提示',
								content: res.msg,
								showCancel: false
							});
						};
					});

				} else {
					this.$utils.toast('您取消了授权');
				};
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		padding: 0 30rpx;
		padding-top: 30rpx;
		height: 260rpx;
		position: relative;
		background: linear-gradient(-90deg, #0DA297 0%, #3DB8AF 100%);
	}
	.home-float {
		position: fixed;
		z-index: 99;
		bottom: 100rpx;
		right: 50rpx;
	}
	.avatar-nickname {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 116rpx;
		height: 116rpx;
		margin-right: 12rpx;
		border-radius: 58rpx;
		display: block;
	}
	.avatars-new {
		position: relative;
		width: 116rpx;
		height: 116rpx;
		display: block;
	}
	.avatars {
		width: 116rpx;
		height: 116rpx;
		margin-right: 12rpx;
		border-radius: 58rpx;
		display: block;
		padding: 0;
		border: 1px solid transparent;
	}

	.avatars-1 {
		margin-right: 12rpx;
		width: 116rpx;
		font-size: 20rpx;
		color: #FFAE14;
		padding: 0;
		text-align: center;
		border: 1px solid transparent;
		line-height: 30rpx;
	}

	.nickname {
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
	}

	.nickname-view text {
		vertical-align: middle;
	}

	.nickname-deit {
		display: inline-block;
		max-width: 200rpx;
		min-width: 100rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.nickname-vip {
		display: inline-block;
		width: 34rpx;
		margin-left: 10rpx;
	}

	.nickname-bottom {
		padding-top: 10rpx;
	}
	.vip-avatar {
		position: absolute;
		right: 0;
		top: 0;
		width: 40rpx;
		height: 40rpx;
		z-index: 9999;
	}
	.nickname-bottom>view {
		display: inline-block;
		padding: 4rpx 6rpx;
		border: 2rpx solid #fff;
		border-radius: 8rpx;
		font-size: 22rpx;
		line-height: 1;
	}

	.nickname-bottom>view:nth-child(1) {
		margin-right: 20rpx;
	}

	.sign-in {
		position: absolute;
		right: 30rpx;
		top: 50rpx;
	}

	.amount-wrap {
		position: absolute;
		left: 0;
		bottom: -130rpx;
		width: 100%;
		padding: 0 30rpx;
	}

	.amount {
		background: #FFFFFF;
		box-shadow: 0px 0px 21px 0px rgba(0, 4, 0, 0.25);
		border-radius: 24rpx;
		height: 200rpx;
		padding-top: 20rpx;
	}

	.amount-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
	}

	.amount-top>view {
		flex: 1;
		padding: 14rpx 0;
		line-height: 1;
	}

	.amount-top>view:nth-child(2) {
		border-left: 4rpx solid #efefef;
		border-right: 4rpx solid #efefef;
	}

	.amount-top>view view:nth-child(1) {
		font-size: 24rpx;
		color: #333333;
		padding-bottom: 20rpx;
	}

	.amount-top>view view:nth-child(2) {
		font-size: 50rpx;
		font-weight: 600;
		color: #333333;
	}

	.amount-bottom {
		font-size: 22rpx;
		font-weight: 500;
		color: #111111;
		text-align: center;
		padding-top: 20rpx;
	}

	.menu {
		padding: 170rpx 30rpx 0 30rpx;
		overflow: hidden;
		text-align: center;
		color: #333333;
		font-size: 22rpx;
	}

	.menu-item {
		width: 20%;
		float: left;
		margin-bottom: 40rpx;
	}

	.menu-img {
		width: 80rpx;
		height: 80rpx;
		vertical-align: middle;
	}

	.menu-title {
		padding-top: 20rpx;
		line-height: 1;
	}

	.banner {
		padding: 10rpx 0;

	}

	.telephone-wrap {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 50;
		background-color: #fff;
	}

	.telephone {

		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
		color: #333;
		padding: 20rpx 30rpx;
	}

	.telephone view text:nth-child(2) {
		color: #0DA297;
	}

	.activity {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		padding-top: 40rpx;
	}

	.activity>view {
		flex: 1;
	}

	.activity>view:first-child {
		margin-right: 20rpx;
	}

	.activity-img {

		height: 140rpx;
	}

	.activity-img image {
		width: 100%;
		height: 140rpx;
		border-radius: 14rpx;
	}

	.activity-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
		padding-left: 10rpx;
		border-left: 4rpx solid #0da297;
		line-height: 1;
		margin-bottom: 30rpx;
	}

	.content {
		padding-bottom: 40rpx;
	}

	.sign-btn {
		position: absolute;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.sign-btn-contact {
		width: 260rpx;
		height: 60rpx;
		line-height: 58rpx;
		color: #fff;
		border-radius: 30rpx;
		background: linear-gradient(90deg, #0DA297 0%, #26C494 100%);
		font-size: 30rpx;
	}

	.setting {
		position: absolute;
		top: 6rpx;
		right: 46rpx;
	}
	.redemption-setting {
		position: absolute;
		top: 10rpx;
		right: 126rpx;
	}
	.redemption-image {
		width: 137rpx;
		height: 38rpx;
	}
	.setting-image {
		width: 46rpx;
		height: 46rpx;
		display: block;
	}

	.bind-phone {
		background-color: #fcc604;
		font-size: 22rpx;
		color: #fff;
		border: none;
		border-radius: 10rpx;
	}
	.card {
		margin-top: 20rpx;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
	}
	.card-left {
		margin-right: 2%;
		width: 48%;
		height: 222rpx;
	}
	.card-img1 {
		width: 100%;
		height: 222rpx;
	}
	.card-right {
		flex: 1;
		height: 222rpx;
	}
	.card-img2 {
		width: 100%;
		height: 106rpx;
	}
</style>
<style>
	page {
		background-color: #fff;
	}
</style>